<template>
	<view class="body">
		<view class="purchase">
			<Singlestore :query="shop_info"></Singlestore>
			<view class="switchover_btn" @click="routeChangeshop">
				<image :src="$IMG_URL('/static/newVersion/cut.png')" mode="" class="cut"></image>
				<text>切换门店</text>
			</view>
		</view>
		<view class="member_card">
			<view class="tabs">
				<view v-for="(item,index) in tabsList" :key="index" class="tabItem" @click="changeTabs(index)">
					<view class="size"
						:style="{color:TabsCurrent == index ?'#73F0EA':'#666666',fontWeight:TabsCurrent == index ?'800':'400'}">
						<text :style="{color:index == 1 && !from.is_single?'#CECECE':''}">{{item.name}}</text>
						<view class="tag" v-if="index == 1 && !from.is_single">
							暂无
						</view>
					</view>
					<view class="sliding-block-box">
						<view class="sliding-block-child" v-if="TabsCurrent == index">

						</view>
					</view>
				</view>
			</view>
			<view class="comlum_box">
				<view class="header">
					<view class="left">
						<text class="size1">以下会员卡支持在</text>
						<text class="size2">{{!TabsCurrent?from.normal_str : from.single_str}}</text>
						<text class="size1">使用</text>
					</view>
					<view class="right" v-if="!TabsCurrent" @click="routeCommon">
						<text>查看通用门店</text>
						<image :src="$IMG_URL('/static/member/arrows.png')" mode="" class="arrows"></image>
					</view>
				</view>
				<view class="member_List">
					<scroll-view scroll-x="true" class="kite-classify-scroll" v-if="TabsCurrent">
						<view class="kite-classify-cell" :style="{border:single_active == index ?'4rpx solid #73F0EA':'', backgroundImage:`url(${item.is_activity == 1 ? 
    $IMG_URL('/static/price/ATIA.png') : 
    $IMG_URL('/static/price/EVT.png')})`}" v-for="(item,index) in single_list" :key="index"
							@click="changeSingle(item, index)">
							<view class="flex-container">
								<view class="drop-box" v-if="item.is_activity == 1">
									<image src="/static/stock/drop.png" mode="" class="drop-image"></image>
									<text>{{item.explain}}</text>
								</view>
								<view class="present">
									{{item.days + '天'}}
								</view>
								<view class="title">
									{{item.title}}
								</view>
								<view class="price">
									<text class="unit">￥</text>
									<text class="number">{{item.price}}</text>
								</view>
								<view class="Countdown" v-if="item.hint != ''">
									{{item.hint}}
								</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-x="true" class="kite-classify-scroll" v-else>
						<view class="kite-classify-cell" :style="{border:normal_active == index ?'4rpx solid #73F0EA':'', backgroundImage:`url(${item.is_activity == 1 ? 
    $IMG_URL('/static/price/ATIA.png') : 
    $IMG_URL('/static/price/EVT.png')})`}" v-for="(item,index) in normal_list" :key="index"
							@click="changNormal(item, index)">
							<view class="flex-container">
								<view class="drop-box" v-if="item.is_activity == 1">
									<image src="/static/stock/drop.png" mode="" class="drop-image"></image>
									<text>{{item.explain}}</text>
								</view>
								<view class="present">
									{{item.days + '天'}}
								</view>
								<view class="title">
									{{item.title}}
								</view>
								<view class="price">
									<text class="unit">￥</text>
									<text class="number">{{item.price}}</text>
								</view>
								<view class="Countdown" v-if="item.hint != ''">
									{{item.hint}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="coupon">
					<view class="coupon_left">
						<text class="name">优惠券</text>
						<view class="number">
							<text class="size1">{{use_num}}</text>
							<text class="size2">张可用</text>
						</view>
					</view>
					<view class="coupon_right" @click="openCoupon">
						<text class="color2" v-if="use_num == 0">暂无可用优惠券</text>
						<text class="color1" v-else-if="coupon_money == 0 || use_num !== 0">{{'-￥' + coupon_money}}</text>
						<text class="color1" v-else>请选择优惠券</text>
						<u-icon name="play-right-fill" :color="use_num == 0?'#DBDBDB':'#999999'" size="13" class="arrows"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式选择模块 -->
		<view class="payment-section">
			<view class="payment-options">
				<!-- 微信支付选项 -->
				<view class="payment-option" @click="selectPayment(0)">
					<image src="/static/payment/wxzf.png" class="payment-icon"></image>
					<text class="payment-name">微信支付</text>
					<view class="custom-radio">
						<view class="custom-icon" :class="{ active: paymentOptions[0].checked }">
							<text class="icon-check" v-if="paymentOptions[0].checked">✓</text>
						</view>
					</view>
				</view>

				<!-- 其他支付方式选项 -->
				<view class="payment-option" v-if="!audit" @click="selectPayment(1)">
					<text class="payment-name">其它支付方式</text>
					<text class="text-name">支持支付宝、银联</text>
					<view class="custom-radio">
						<view class="custom-icon" :class="{ active: paymentOptions[1].checked }">
							<text class="icon-check" v-if="paymentOptions[1].checked">✓</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rights-and-interests">
			<view class="interests-title">
				{{interests.title}}
			</view>
			<view class="interests-content">
				<u-parse :html="interests.content"></u-parse>
			</view>
		</view>
		<view class="rights-and-interests">
			<view class="interests-title">
				{{notes_info.title}}
			</view>
			<view class="interests-content">
				<u-parse :html="notes_info.content"></u-parse>
			</view>
		</view>
		<view class="empty">

		</view>
		<view class="foot_box">
			<view class="agreement">
				<view class="left" @click.stop="whetherAgreement = !whetherAgreement">
					<image
						:src="whetherAgreement?$IMG_URL('/static/newVersion/agreement2.png'):$IMG_URL('/static/newVersion/agreement1.png')"
						mode="" class="icon"></image>
					<text class="size1">我已阅读并同意:</text>
				</view>
				<view style="margin-top: 6rpx;">
					<text class="size2" @click="routeAreement">《优机小羊会员卡购买协议》、</text>
					<text class="size2" @click="routeSzAreement">《优机小羊会员守则》、</text>
					<text class="size2" @click="routeSHAreement">《优机小羊会员卡售后规则》</text>
				</view>
			</view>
			<view class="btn" @click="handlePayment">
				支付￥{{pay_money}} 立即开通
			</view>
		</view>
		<coupon :couponShow="couponShow" :tabsList="coupontabsList" :TabsCurrent="couponTabsCurrent"
			:couponActive="couponActive" @close="offcoupon" @changeTabs="changeCouponTabs"
			:popupList="!couponTabsCurrent?use_list:dis_list" @toggle="toggles" @changeActive="changeCouponActive">
		</coupon>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	import coupon from './components/coupon.vue'
	import Singlestore from '../shop/components/Singlestore.vue'
	import {
		pay
	} from '@/api/pay.js'
	import {
		CardMain
	} from '@/api/vip.js'
	import {
		versions
	} from '@/api/common.js'
	export default {
		components: {
			coupon,
			Singlestore
		},
		data() {
			return {
				audit: 0,
				// 支付方式相关
				paymentOptions: [{
						name: '微信支付',
						value: 'wechat',
						checked: true
					},
					{
						name: '其他支付方式',
						value: 'other',
						checked: false
					}
				],
				isLoading: false,
				VipQuery: {
					shop_id: null,
					coupon_id: null,
					par: null,
					is_share: 0
				},
				// 优惠券
				couponShow: false,
				whetherAgreement: false,
				coupontabsList: [{
						name: '可用优惠券(0)'
					},
					{
						name: '不可用优惠券(0)'
					}
				],
				couponTabsCurrent: 0,
				couponActive: null,
				use_list: [],
				dis_num: 0,
				dis_list: [],
				use_num: 0,
				// tabs标签
				tabsList: [{
					name: '多店通用'
				}, {
					name: '单店使用'
				}],
				TabsCurrent: 0,
				shop_info: {},
				// VIP会员
				memberList: [],
				single_list: [],
				single_active: -1,
				normal_list: [],
				normal_active: null,
				memberActive: -1,
				shop_num: 0,
				interests: {},
				notes_info: {},
				pay_money: '',
				coupon_money: 0,
				from: {},
				otherPayOrderNo: '',
			}
		},
		created() {
			this.getVersions()
		},

		onLoad(e) {
			console.log('e', e.par, e);
			// 使用条件运算符简化赋值操作
			this.VipQuery.par = e.par || '';
			this.VipQuery.shop_id = e.shop_id || '';
			this.VipQuery.coupon_id = e.coupon_id || '';
			this.VipQuery.is_share = e.is_share || 0;

		},
		onShow() {
			let that = this
			uni.$on('SHOPID', function(data) {
				console.log("SHOPID：", data);
				that.VipQuery.shop_id = data.shop_id
				that.VipQuery.par = ''
				that.single_active = -1
				that.VipQuery.is_share = 1
			})
			that.getCardMain()
		},
		methods: {
			getVersions() {
				versions().then(({
					data: res
				}) => {
					// console.log('res', res);
					if (res.code == 1) {
						this.audit = res.data.audit
					}
				})
			},
			// 选择支付方式
			selectPayment(index) {
				// 取消所有选项的选中状态
				this.paymentOptions.forEach(opt => opt.checked = false);
				// 选中当前点击的选项
				this.paymentOptions[index].checked = true;
			},
			routeCommon() {
				uni.navigateTo({
					url: '/pageA/shop/select'
				})
			},
			getCardMain() {
				this.isLoading = true;
				CardMain(this.VipQuery).then(({
					data: res
				}) => {
					console.log('getCardMain', res);
					if (res.code == 1) {
						this.isLoading = false;
						this.shop_info = res.data.shop_info
						this.TabsCurrent = res.data.is_show
						this.single_list = res.data.single_list
						this.normal_list = res.data.normal_list
						this.single_active = res.data.single_list.findIndex(item => item.is_opt == 1);
						this.normal_active = res.data.normal_list.findIndex(item => item.is_opt == 1);
						this.couponActive = res.data.use_list.findIndex(item => item.is_use == 1);

						if (this.normal_active != -1) {
							const obj = res.data.normal_list.find(item => item.is_opt == 1)
							this.VipQuery.par = obj.par
						}
						if (this.single_active != -1) {
							const obj = res.data.single_list.find(item => item.is_opt == 1)
							this.VipQuery.par = obj.par
						}                                                             
						this.shop_num = res.data.shop_num
						this.interests = res.data.equity_info
						this.notes_info = res.data.notes_info
						this.pay_money = res.data.pay_money
						this.dis_num = res.data.dis_num
						this.use_num = res.data.use_num
						this.use_list = res.data.use_list
						this.dis_list = res.data.dis_list
						this.coupon_money = res.data.coupon_money
						this.coupontabsList[0].name = '可用优惠券(' + res.data.use_num + ')'
						this.coupontabsList[1].name = '不可用优惠券(' + res.data.dis_num + ')'
						this.$u.mpShare = {
							title: '购买VIP会员',
							path: '/pageA/member/purchase?par=' + this.VipQuery.par + '&shop_id=' + this
								.VipQuery.shop_id + '&coupon_id=' + this.VipQuery.coupon_id + '&is_share=' +
								1,
							imageUrl: 'https://ugeego.youjixiaoyang.com/member/member_bg2.png',
						}
						// console.log('CardMain11', this.VipQuery)
						this.from = res.data
					} else {
						this.$SHOWMODALMSG('', res)
					}
				})
			},
			changeSingle(item, index) {
				if (this.single_active == index) {
					this.single_active = -1
				} else {
					this.single_active = index
					this.VipQuery.par = this.single_list[this.single_active].par
					this.getCardMain()
				}
			},
			changNormal(item, index) {
				if (this.normal_active == index) {
					this.normal_active = -1
				} else {
					this.normal_active = index
					this.VipQuery.par = this.normal_list[this.normal_active].par
					this.getCardMain()
				}
			},
			routeChangeshop() {
				uni.navigateTo({
					url: '/pageA/shop/select'
				})
			},
			// 处理支付方式
			handlePayment() {
				// 获取当前选中的支付方式
				const selectedPay = this.paymentOptions.find(opt => opt.checked).value;
				// 动态计算 is_form 值（使用let声明，确保作用域正确）
				let dynamicIsForm = selectedPay === 'wechat' ? 0 : 2;

				// 检查是否同意协议
				if (!this.whetherAgreement) {
					uni.showModal({
						title: '优机小羊会员卡购买协议',
						content: '为了您能够正常使用我们的服务，您需要阅读并同意《优机小羊会员卡购买协议》。',
						showCancel: true,
						cancelText: '不同意',
						confirmText: '同意',
						confirmColor: '#73F0EA',
						success: (res) => {
							if (res.confirm) {
								this.whetherAgreement = true;
								// 确认后再次调用支付处理
								this.handlePayment();
							}
						}
					});
					return;
				}

				// 构造公共支付参数
				const payParams = {
					form: 'card',
					coupon_id: this.from.coupon_id || '',
					par: this.VipQuery.par || '',
					payment_method: selectedPay,
					is_form: dynamicIsForm
				};

				// 根据选择的支付方式执行不同逻辑
				if (selectedPay === 'wechat') {
					// 微信支付：直接调用支付方法
					this.wechatPayment(payParams);
				} else {
					// 其他支付方式：先获取order_no再跳转
					uni.showLoading({
						title: '获取支付信息中...',
						mask: true
					});
					pay(payParams).then(({
						data: res
					}) => {
						uni.hideLoading();
						if (res.code === 1 && res.data && res.data.order_no) {
							// 携带order_no和其他参数跳转
							uni.navigateTo({
								url: `/pageA/member/memberPurchase?order_no=${res.data.order_no}&money=${this.pay_money}&par=${this.VipQuery.par}`
							});
						} else {
							this.$refs.uToast.show({
								title: res.msg || '获取支付信息失败',
								type: 'error',
								icon: false
							});
						}
					}).catch(err => {
						uni.hideLoading();
						console.error('其他支付接口请求失败：', err);
						this.$refs.uToast.show({
							title: '网络异常，请重试',
							type: 'error',
							icon: false
						});
					});
				}
			},

			// 微信支付具体实现（接收参数）
			wechatPayment(payParams) {
				let that = this;
				pay(payParams).then(({
					data: res
				}) => {
					if (res.code == 1) {
						uni.requestPayment({
							"timeStamp": res.data.timeStamp,
							"nonceStr": res.data.nonceStr,
							"package": res.data.package,
							"signType": res.data.signType,
							"paySign": res.data.paySign,
							success: (rescc) => {
								console.log('微信支付成功:' + JSON.stringify(rescc));
								uni.navigateTo({
									url: '/pageA/member/payment-success'
								});
							},
							fail: (errcc) => {
								console.log('微信支付失败:' + JSON.stringify(errcc));
								that.$refs.uToast.show({
									title: '支付已取消',
									type: 'error',
									icon: false,
								});
							}
						});
					} else if (res.code == 401) {
						this.$SHOWMODALMSG('', res);
					} else {
						that.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false,
						});
					}
				});
			},
			// 三个协议跳转规则
			routeSzAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'cardrule'
				})
			},
			routeAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'member'
				})
			},
			routeSHAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'cardprocess'
				})
			},
			// 优惠券相关方法
			openCoupon() {
				if (this.use_num == 0) {
					uni.showToast({
						title: '您当前没有优惠券',
						icon: 'none'
					})
				} else {
					this.couponShow = true
				}
			},
			offcoupon(data) {
				this.couponShow = data
			},
			changeCouponActive(data) {
				this.couponActive = data
				this.VipQuery.coupon_id = this.use_list[this.couponActive].coupon_id;
				this.getCardMain()
			},
			toggles(message) {
				this.$set(this.popupList[message], 'open', !this.popupList[message].open);
			},
			changeTabs(index) {
				if (!index) {
					this.single_active = -1
				} else {
					this.normal_active = -1
				}
				if (this.from.is_single) {
					this.TabsCurrent = index;
				}
			},
			changeCouponTabs(data) {
				this.couponTabsCurrent = data
			}
		}
	}
</script>

<style lang="scss">
	.custom-radio {
		display: flex;
		align-items: center;
		margin: 12rpx 0;

		.custom-icon {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			border: 2rpx solid #73F0EA;
			color: #666;
			background-color: #fff;
		}

		.custom-icon.active {
			background-color: #73F0EA;
			color: #fff;
			border-color: #73F0EA;
		}

		.icon-check {
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
	}

	.purchase {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 324rpx;
		background: #ffffff;

		.switchover_btn {
			transform: rotateZ(360deg);
			width: 702rpx;
			height: 88rpx;
			border: 1rpx solid #73F0EA;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #73F0EA;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;

			.cut {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	.member_card {
		margin-top: 16rpx;
		width: 750rpx;
		height: 498rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 0 25rpx;

		.tabs {
			padding-top: 32rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			border-bottom: 1rpx solid #e9e9e9;

			.tabItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 60rpx;

				.size {
					font-size: 32rpx;
					letter-spacing: 0.62rpx;
					font-family: PingFang SC, PingFang SC-Heavy;
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.tag {
					margin-left: 7rpx;
					width: 52rpx;
					height: 28rpx;
					background: rgba(234, 234, 234, 0.4);
					border-radius: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.sliding-block-box {
					height: 20rpx;
					padding-top: 12rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.sliding-block-child {
					width: 44rpx;
					height: 8rpx;
					background: #73F0EA;
					border: 2rpx solid rgba(0, 0, 0, 0.00);
					border-radius: 2rpx;
				}
			}
		}

		.comlum_box {
			width: 100%;
			display: flex;
			flex-direction: column;

			.header {
				width: 100%;
				height: 84rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {
					flex: 1;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;

					.size1 {
						color: #666666;
					}

					.size2 {
						color: #73F0EA;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #999999;

					.arrows {
						margin-left: 5rpx;
						width: 10rpx;
						height: 16rpx;
					}
				}
			}

			.member_List {
				position: relative;
				white-space: nowrap;
				width: 100%;
			}

			.kite-classify-scroll {
				width: 100%;
				height: 212rpx;
				overflow: hidden;
				white-space: nowrap;
			}

			.kite-classify-cell {
				display: inline-block;
				width: 220rpx;
				height: 212rpx;
				background: #ffffff;
				border-radius: 16rpx;
				position: relative;
				margin-right: 28rpx;
				border: 4rpx solid #ffffff;
				overflow: hidden;
				background-repeat: no-repeat;
				background-size: cover;

				.present {
					position: absolute;
					right: 0;
					top: 0;
					width: 70rpx;
					height: 34rpx;
					background: #000000;
					border-radius: 0rpx 0 0rpx 16rpx;
					font-size: 24rpx;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
				}

				.Countdown {
					z-index: 99;
					left: 0rpx;
					bottom: 0rpx;
					position: absolute;
					width: 100%;
					height: 36rpx;
					background: rgba(215, 116, 250, 0.1);
					border-radius: 4rpx;
					font-size: 16rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #000000;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}

				.flex-container {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					margin-bottom: 72rpx;
				}

				.drop-box {
					position: absolute;
					left: 8rpx;
					top: 8rpx;
					height: 28rpx;
					background: rgba(215, 116, 250, 0.1);
					border-radius: 4rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #d774fa;
					padding: 0 6rpx;

					.drop-image {
						width: 12rpx;
						height: 16rpx;
						margin-right: 2rpx;
					}
				}

				.title {
					margin-top: 42rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #666666;
				}

				.price {
					display: flex;
					flex-direction: row;
					align-items: baseline;

					.unit {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
					}

					.number {
						font-size: 48rpx;
						font-weight: 700;
					}
				}
			}

			.coupon {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				height: 108rpx;

				.coupon_left {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-right: 10rpx;
					}

					.number {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;

						.size1 {
							color: #F37364;
						}

						.size2 {
							color: #f37364;
						}
					}
				}

				.coupon_right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;

					text-align: left;

					.color1 {
						font-weight: 700;
						color: #f37364;
					}

					.color2 {
						font-weight: 400;
						color: #b6b6b6;
					}

					.arrows {
						width: 10rpx;
						height: 16rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}

	.rights-and-interests {
		width: 100%;
		margin-top: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;

		.interests-title {
			width: 100%;
			height: 92rpx;
			background: #ffffff;
			font-size: 36rpx;
			font-family: Alimama ShuHeiTi, Alimama ShuHeiTi-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.interests-content {
			padding: 0 25rpx 25rpx;
		}
	}

	.empty {
		width: 100%;
		height: 218rpx;
	}

	.foot_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 260rpx;
		position: fixed;
		bottom: 0;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);

		.agreement {
			width: 100%;
			height: 58rpx;
			background: #ffffff;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: row;
			margin: 10rpx 0 60rpx 0;
			padding: 0 12rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.size1 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
			}

			.size2 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #73F0EA;
			}
		}

		.btn {
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// 支付方式选择模块样式
	.payment-section {
		width: 100%;
		background: #ffffff;
		padding: 24rpx;
		margin-top: 16rpx;

		.payment-options {
			width: 100%;
		}

		.payment-option {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			padding: 0 2rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}
		}

		.payment-icon {
			width: 32rpx;
			height: 28rpx;
			margin-right: 16rpx;
			border-radius: 8rpx;
		}

		.payment-name {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			letter-spacing: 0.62px;
		}

		.text-name {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			margin-right: 16rpx;
			color: #666666;
			letter-spacing: 0.62px;
		}
	}
</style>